/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';
import {Button, InputItem} from "@ant-design/react-native";

import Image from './Image';
type Props = {};
const url = 'http://47.110.8.203:8000/api/captcha?phone=';
export default class ImagecCode extends Component<Props> {

    constructor(props) {
        super(props);

        this.state = {
            image_url: url + '133000022222',
            flag:1
        }
    }

    componentDidMount() {

    }

    phone = '';

    render() {
        return (
            <View style={styles.container}>
                <InputItem
                    title={'phone'}
                    onChange={(text) => {
                        if (text.length === 11) {
                            this.phone = text;
                            this.setState({image_url: url + this.phone, flag:this.state.flag+1})
                        }
                    }}
                />
                <TouchableOpacity
                    onPress={() => {
                        this.setState({image_url: url + this.phone,flag:this.state.flag+1})
                    }}
                >
                    <Image  style={{width: 60, height: 30,backgroundColor:'red'}} source={{uri: this.state.image_url+`&&r=${this.state.flag}`, cache:'reload'}}/>
                </TouchableOpacity>

            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',


    }
});

